<template>
  <div>
    <el-autocomplete
      v-model="supplierName"
      v-loading="loading"
      class="inline-input"
      :fetch-suggestions="selectSupplierList"
      placeholder="请输入供应商名称"
      style="width: 100%"
      clearable
      @select="handleSelectSupplier"
    >
      <template slot-scope="{ item }">
        <div>{{ item.supplierName }}</div>
      </template>
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="openSupplierDialog"
      />
    </el-autocomplete>
    <div v-if="supplierVisible">
      <supplier-module ref="supplierModule" :visible="supplierVisible" @close="closeSupplierDialog" />
    </div>
  </div>
</template>

<script>

import { supplier_list } from '@/api/base-data/supplier'
import supplierModule from '@/modules/supplierModule.vue'

export default {
  name: 'SupplierQuery',
  components: { supplierModule },
  props: {
    value: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      supplierVisible: false,
      supplierName: '',
      supplierId: this.value,
      loading: false
    }
  },
  methods: {
    init(supplierName) {
      this.supplierName = supplierName
    },
    resetQueryForm() {
      this.supplierName = ''
      this.supplierId = undefined
    },
    // 打开供应商弹窗
    openSupplierDialog() {
      this.supplierVisible = true
      this.$nextTick(() => {
        this.$refs.supplierModule.doPage()
      })
    },
    // 关闭供应商弹窗
    closeSupplierDialog(row) {
      if (row) {
        this.supplierName = row.supplierName
      }
      this.supplierVisible = false
      this.$emit('choose', row)
    },
    // 供应商选中
    handleSelectSupplier(row) {
      if (row) {
        this.supplierName = row.supplierName
        this.$emit('choose', row)
      }
    },
    selectSupplierList(query, callback) {
      this.loading = true
      supplier_list({ supplierName: query }).then(resp => {
        if (resp.success) {
          callback(resp.data)
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style scoped>

</style>
